<template>
	<view class="container">
		<!-- 主要内容区域 -->
		<scroll-view scroll-y class="content">
			<!-- 活动banner -->
			<!-- <view class="banner">
        <image :src="bannerUrl" mode="aspectFill" class="banner-image"/>
        <view class="banner-text">
          <text class="banner-title">清洁家园行动</text>
          <text class="banner-desc">共同守护城市美好环境</text>
        </view>
      </view> -->
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				style="height: 400rpx;" :duration="500">
				<swiper-item v-for="(item,index) in bannerArr" :key="index">
					<view class="banner">
						<image :src="item.src" mode="aspectFill" class="banner-image" />
						<view class="banner-text">
							<text class="banner-title">{{item.title}}</text>
							<text class="banner-desc">{{item.desc}}</text>
						</view>
					</view>
				</swiper-item>


			</swiper>


			<!-- 参与步骤 -->
			<view class="steps">
				<text class="section-title">参与步骤</text>
				<view class="steps-grid">
					<view v-for="(step, index) in steps" :key="index" class="step-item">
						<image :src="step.icon" mode="aspectFill" class="step-icon" />
						<text class="step-text">{{ step.title }}</text>
					</view>
				</view>
			</view>

			<!-- 拍照上传区域 -->
			<view class="upload-section">
				<!--  -->
				<!-- <button class="upload-button" style="height: 44px;" open-type="getUserInfo" @getuserinfo="getuserinfo"> -->
				<!-- <button class="upload-button" style="height: 44px;" @tap="getuserinfo"> -->
				<button class="upload-button" style="height: 44px;" @click="handleUpload">
					<uni-icons type="camera" size="30" color="#ffffff"></uni-icons>
					<text class="button-text" style="color:#fff">立即拍照上传</text>
				</button>
				<text class="upload-tip">拍摄清晰照片可加快审核速度</text>
			</view>

			<!-- 示例展示 -->
			<view class="examples">
				<text class="section-title">优秀案例</text>
				<scroll-view scroll-x class="examples-scroll">
					<view class="examples-content">
						<view v-for="(example, index) in examples" :key="index" class="example-item">
							<image :src="example.image" mode="aspectFill" class="example-image" />
							<text class="example-text">{{ example.title }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 奖励规则 -->
			<view class="rules">
				<view class="" style="display: flex;justify-content: space-between;align-items: center; padding-bottom: 30rpx;;   border-bottom: solid 1px #eee;margin-bottom: 12px;">
					<text class="section-title">奖励规则</text>
					<text style="color: #999999;font-size: 14px;" @click="toActivities">详情</text>
				</view>
				<view class="rules-list">
					<view v-for="(rule, index) in rules" :key="index" class="rule-item">
						<uni-icons :type="rule.icon" size="20" color="#18A058"></uni-icons>
						<view class="rule-content">
							<text class="rule-title">{{ rule.title }}</text>
							<text class="rule-desc">{{ rule.desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<signview ref="getUserInfoRef" ></signview>
	</view>
</template>    

<script lang="ts" setup>
	import {resourcesPath} from '@/config/common.js'

	import { ref } from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		mainStore
	} from '@/store/index.js';
	import {validateIsLogin} from '@/hooks/validateIsLogin.js'
	
	const getUserInfoRef = ref(null)
	const {validateLogin} =  validateIsLogin(getUserInfoRef)

	
	const currentTab = ref(0);

	const bannerArr = [
		{
			src: resourcesPath + '/image/banner1.jpg',
			title: '清洁家园行动',
			desc: '共同守护城市美好环境'
		},
		{
			src: resourcesPath + '/image/banner2.jpg',
			title: '清洁家园行动',
			desc: '发现城市牛皮癣，上传照片即可获得奖励'
		}
	]
	const steps = [
		{
			title: '发现污染',
			icon: resourcesPath + '/image/steps-1.jpg'
		},
		{
			title: '拍照取证',
			icon: resourcesPath + '/image/steps-2.jpg'
		},
		{
			title: '上传提交',
			icon: resourcesPath + '/image/steps-3.jpg'
		},
		{
			title: '获得奖励',
			icon: resourcesPath + '/image/steps-4.jpg'
		}
	];

	const examples = [
		{
			title: '墙面小广告清理前后对比',
			image: resourcesPath + '/image/contrast.jpg'
		},
		{
			title: '街道环境整治效果',
			image: resourcesPath + '/image/effect.jpg'
		}
	];

	const rules = [
		{
			icon: 'medal',
			title: '基础奖励',
			desc: '每次有效清除奖励 2-5分'
		},
		{
			icon: 'calendar',
			title: '结算周期',
			desc: '每周结算'
		},
		{
			icon: 'info',
			title: '作假惩罚',
			desc: '弄虚作假将清零积分，重新从2分/张计算'
		}
	];
	const userInfo = ref({})
	const handleUpload = () => {
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/upload/upload'
		})
	}
	
	const getuserinfo = (res) => {
		console.log(res)
	}
	const toActivities = ()=>{
		uni.navigateTo({
			url:'/pages/activities/activities'
		})
	}
	onLoad(() => {
		// if(!mainStore().userInfo.nickName){
		// 	mainStore().login()
		// }
	})
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.nav {
		flex-shrink: 0;
		background-color: #18A058;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.nav-content {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-title {
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 500;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 400rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.banner-text {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
	}

	.banner-title {
		display: block;
		color: #FFFFFF;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.banner-desc {
		color: rgba(255, 255, 255, 0.9);
		font-size: 14px;
	}

	.steps {
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 1rem;
	}

	.section-title {
		display: block;
		font-size: 16px;
		font-weight: 500;
		
	}

	.steps-grid {
		display: flex;
		justify-content: space-between;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 160rpx;
	}

	.step-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-bottom: 16rpx;
	}

	.step-text {
		color: #666666;
		font-size: 12px;
	}

	.upload-section {
		margin-top: 20rpx;
		padding: 60rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 1rem;
	}

	.upload-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #18A058;
	}

	.upload-text {
		color: #FFFFFF;
		font-size: 16px;
		margin-left: 16rpx;
	}

	.upload-tip {
		display: block;
		text-align: center;
		color: #999999;
		font-size: 12px;
		margin-top: 20rpx;
	}

	.examples {
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 1rem;
	}

	.examples-scroll {
		width: 100%;
	}

	.examples-content {
		display: flex;
		padding-bottom: 20rpx;
	}

	.example-item {
		margin-right: 30rpx;
		width: 300rpx;
		flex-shrink: 0;
	}

	.example-image {
		width: 300rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.example-text {
		display: block;
		color: #666666;
		font-size: 12px;
		margin-top: 16rpx;
	}

	.rules {
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 1rem;
	}

	.rules-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.rule-item {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
	}

	.rule-content {
		flex: 1;
	}

	.rule-title {
		display: block;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.rule-desc {
		color: #666666;
		font-size: 12px;
	}

	.tab-bar {
		flex-shrink: 0;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		border-top: 1px solid #EEEEEE;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6rpx;
	}

	.tab-text {
		color: #666666;
		font-size: 12px;
	}

	.tab-item-active {
		color: #18A058;
	}

	.tab-text-active {
		color: #18A058;
	}
</style>